<template>
  <div class="pageDiv">
    <!-- 歌单封面 -->
     <div class="sheetImg">
        <img :src="songSheetData.coverImgUrl" alt="">
        <div class="sheetMsg">
        <h1 class="sheetTitle">{{songSheetData.name}}</h1>
        <p class="msc">Single by <router-link to="#" class="artice">{{creatorData.nickname}}</router-link></p>
        <div>
            <span>2022</span><span>·{{songSheetData.trackCount}}首歌</span>
        </div>
        <p class="tip"><span>{{songSheetData.description}}</span></p>
        <div class="btnDiv">
            <a-button class="btn" size="large"><play-circle-outlined />播放</a-button>
            <a-button class="btn" size="large"><heart-outlined />收藏</a-button>
        </div>
        </div>
     </div>
     <!-- 歌单信息 -->
     
     <!-- 歌单列表 -->
     <div>
        <a-list></a-list>
    </div>
  </div>
</template>


<script lang="ts">
import { defineComponent,onMounted,ref } from "@vue/runtime-core";
import {PlayCircleOutlined,HeartOutlined} from '@ant-design/icons-vue';
import { songSheetStore,getLoginStore,AllsongSheetStore} from "../../store";
import { useRoute } from 'vue-router'

  export default defineComponent({
     name:"app",
     components:{PlayCircleOutlined,HeartOutlined},
     setup(){
        // 接受路由传过来的参数
         const route = useRoute()
         let id = ref()
         id.value = route.query.id
         //更加歌单Id寻找歌单详情页,先获取cookie值
         const cookie = ref(getLoginStore().cookie)
         const getSongSheetStore = songSheetStore()
         //获取歌单所以歌曲
         const getAllsongSheetStore = AllsongSheetStore()
         const getAllsongSheetData:any = ref([])
         //声明数组来装sotre返回的数据
         const songSheetData:any = ref([])
         const creatorData:any = ref([])
         async function getSongSheetStoreInfo(){
            getAllsongSheetData.value = (await getAllsongSheetStore.fetch(id.value,cookie.value)).data.songs
            songSheetData.value = (await getSongSheetStore.fetch(id.value,cookie.value)).data.playlist
            creatorData.value = songSheetData.value.creator
            console.log('******************',songSheetData.value)
            console.log('//////////////',getAllsongSheetData.value);
         }
         //挂载在onMounted中组件挂载完毕拿到数据
         onMounted(()=>{
            getSongSheetStoreInfo()
         })
         
      return{
            songSheetData,
            creatorData,
            getAllsongSheetData
      }
     }
  })
</script>

<style lang="less" scoped>
.sheetImg{
    display: flex;
    border-bottom: 2px solid rgb(224, 223, 223) ;
    img{
        width: 16vw;
        height: 32vh;
        border-radius: 4%;
    }
    .sheetMsg{
        margin-top: 2%;
        margin-left: 5%;
        .sheetTitle{
            font-size: 40px;
            font-weight: 900;
        }
        .msc{
            font-size: 24px;
        }
        .artice{
            font-weight: 700;
        }
        .tip{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .btnDiv{
            margin-top: 3%;
            margin-left: 4%;
            margin-bottom: 4%;
            .btn{
                width: 10vw;
                margin-right: 1rem;
            }
        }
    }
}

</style>
